<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hlht-kaka</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script>
    <style></style>
</head>
<body>
    <button>Get</button>
    <button>Post</button>
    <button>Axios</button>
</body>
<script>
    const buttons = document.querySelectorAll("button");
    axios.defaults.baseURL = "http://127.0.0.1:8888";
    // axios get
    buttons[0].onclick = () => {
        axios.get("/axios-server", {
            // url参数
            params: {
                id: "kaka",
                vip: 8
            },
            // 
            headers: {
                name: "kaka",
                sex: "boy,"
            }
        }).then(value => {
            console.log(value);
        }).catch(error => {
            console.log(error);
        });
    }
    // post
    buttons[1].onclick = () => {
        axios.post("/axios-server",
            // 请求体
            {
                name: "7",
                pw: "700"
            },{
                params: {
                    name:"cr7",
                    num: 7
                },
                headers: {
                    height: 177,
                    weight: 85
                }
            }
        ).then(value => {
            console.log(value);
        }, reason => {
            console.log(reason);
        });
    }
    // 通用
    buttons[2].onclick = () => {
        axios({
            method: "POST",
            url: "/axios-server",
            params: {
                name:"cr77",
                num: 77
            },
            headers: {
                a: 100,
                b: 200
            },
            data: {
                username: "admin",
                pw: 111111
            }
        });
    }
</script>
</html>